<!--
 * @Author: your name
 * @Date: 2021-03-01 11:02:10
 * @LastEditTime: 2021-03-01 14:02:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\list\index.vue
-->
<template>
  <div>
    <canvas id="canvas-face"></canvas>
    <video src="" id="videoCamera-face"></video>
    <div id="canvas-face-upload"></div>
    <div class="try-right-head-box">
        <img id="headCanvas" class="try-right-head" src="/media/tryon/1.png">
        <img src="/media/tryon/glasses/1.png" id="glassesMove" class="try-right-glasses" style="transform: scale(1) rotate(0deg); width: 197.031px; left: 179.854px; top: 165.708px;">
    </div>
  </div>
</template>

<script>
// import tracking from '~/assets/js/tracking-min.js'
// import '~/assets/js/face-min.js'

export default {
    name: 'list',
    data () {
        return {
            trackerTask: null,
            trackering: null,
            mediaStreamTrack: null
        }
    },
    mounted () {
        this.getCompetence()
    },
    methods: {
        getCompetence() {
            let flag = true;
            const _this = this;
            const video = this.mediaStreamTrack = document.getElementById('videoCamera-face');
            const canvas = document.getElementById('canvas-face');
            const context = canvas.getContext('2d');

            const tracker = new window.tracking.ObjectTracker('face');
            tracker.setInitialScale(4);
            tracker.setStepSize(2);
            tracker.setEdgesDensity(0.1);
            // 启动摄像头初始化
            this.trackerTask = window.tracking.track('#videoCamera-face', tracker, {
                camera: true
            });
            tracker.on("track", function(event) {
                context.clearRect(0,0,canvas.width,canvas.height);
                event.data.forEach(function(rect) {
                    context.strokerStyle = "#ff0000";
                    context.strokerRect(rect.x, rect.y, rect.width,rect.height);
                })
                if (event.data.length) {
                    // 会不停的去检测人脸，所以这里需要做个锁
                    if (flag) {
                        // 裁剪出人脸并绘制下来
                        const canvasUpload = document.getElementById("canvas-face-upload");
                        const contextUpload = canvasUpload.getContext("2d");
                        contextUpload.drawImage(video, 0, 0, 105, 105)
                        flag = false
                        // 人脸的base64
                        const dataURL = canvasUpload.toDataURL("image/jpeg");
                        // ajax请求
                        console.log('dataURL :>> ', dataURL);
                        // _this.$store.dispatch("LoginByFaceID", {
                        //     face_img: dataURL.slice(23) // 我们后台需要的base64不要前缀
                        // })
                    }
                }
            })

        },
        glassPosition () {
            // glassesobj:镜框图片;_widthDom:大图宽度
            var objects = new tracking.ObjectTracker(['eye']);
            // 跟踪器实例监听track事
            tracking.track(`#tempImg`, objects)
            // 监听track事件
            objects.on('track', function (event) {
                console.log('event :>> ', event);
                if (event.data.length < 1) {
                    // No objects were detected in this frame.
                } else {
                    var curWidth = _widthDom
                    var options = event.data
                    eyeOptions = options;
                    console.log('curWidth :>> ', curWidth);
                    console.log('eveOptions2 :>> ', eyeOptions);
                    var glassesLeft = options[options.length - 1].x < options[options.length - 2].x 
                    ? (options[options.length - 1].x - 20)/480*curWidth 
                    : (options[options.length - 2].x - 20)/480*curWidth,
                    glassesWidth = options[options.length - 1].x < options[options.length - 2].x 
                    ? (options[options.length - 2].width + options[options.length - 2].x - options[options.length - 1].x+60) / 480 * curWidth 
                    : (options[options.length - 1].width + options[options.length - 1].x - options[options.length - 2].x+60) / 480 * curWidth,
                    glassesTop = options[options.length - 1].y < options[options.length - 2].y 
                    ? (options[options.length - 1].y - 10) / 480 * curWidth 
                    : (options[options.length - 2].y - 10) / 480 * curWidth
                    console.log('glassesLeft :>> ', glassesLeft);
                    console.log('glassesWidth :>> ', glassesWidth);
                    console.log('glassesTop :>> ', glassesTop);
                    // glassesobj.css("width",glassesWidth + 'px')
                    // glassesobj.css("left",glassesLeft + 'px')
                    // glassesobj.css("top",glassesTop + 'px')                   
                }
            })      
        }
    },
    destroyed () {
        if(!this.mediaStreamTrack) return
        // 关闭摄像头和侦测
        this.mediaStreamTrack.srcObject.getTracks()[0].stop();
        this.trackerTask.stop()
    }
}
</script>

<style>

</style>